<template>
  <div class="container top10">
    <h2 class="homeTitle">销量排名TOP10</h2>
    <!-- 添加 v-if 来防止在数据加载完成前渲染空的图表容器 -->
    <div class="charBox" v-if="props.top10data && props.top10data.nameList">
      <!-- 关键修改：使用 ref="chartRef" 来代替 id -->
      <div ref="chartRef" style="width: 100%; height: 380px"></div>
    </div>
    <!-- 添加一个加载中或空状态的占位符 -->
    <div v-else class="charBox-placeholder">
      数据加载中...
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import type { PropType } from 'vue';
import * as echarts from 'echarts';

// --- 1. 定义 Props ---
const props = defineProps({
  top10data: {
    type: Object as PropType<any>,
    default: () => ({})
  }
});

// --- 2. ECharts 初始化与生命周期管理 ---
const chartRef = ref<HTMLElement | null>(null);
let myChart: echarts.ECharts | null = null;

const initChart = () => {
  // 确保 DOM 元素存在且数据有效
  if (chartRef.value && props.top10data && props.top10data.nameList) {
    myChart = myChart || echarts.init(chartRef.value);

    const option: echarts.EChartsOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }, // 增加阴影指示器
        backgroundColor: '#fff',
        borderRadius: 2,
        textStyle: { color: '#333', fontSize: 12, fontWeight: 300 },
      },
      grid: {
        top: 0,
        left: '0',
        right: '20', // 给右侧留出一点空间
        bottom: '0',
        containLabel: true,
      },
      xAxis: {
        show: false,
        type: 'value', // 横向条形图的 x 轴是数值轴
      },
      yAxis: {
        type: 'category',
        data: props.top10data.nameList,
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
          textStyle: { color: '#666', fontSize: 12 },
        },
      },
      series: [
        {
          name: '销量', // 建议给 series 命名
          data: props.top10data.numberList,
          type: 'bar',
          showBackground: true,
          backgroundStyle: { color: '#F3F4F7', borderRadius: [0, 10, 10, 0] },
          barWidth: 20,
          itemStyle: {
            borderRadius: [0, 10, 10, 0], // 圆角
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              { offset: 0, color: '#2892E5' },
              { offset: 1, color: '#409EFF' },
            ]),
          },
          label: {
            show: true,
            position: "right", // 标签显示在柱条右侧
            color: '#333',
            formatter: '{c}' // 直接显示数值
          },
        },
      ],
    };
    myChart.setOption(option);
  }
};

const resizeChart = () => {
  myChart?.resize();
};

onMounted(() => {
  initChart();
  window.addEventListener('resize', resizeChart);
});

onUnmounted(() => {
  window.removeEventListener('resize', resizeChart);
  myChart?.dispose();
});

// --- 3. 监听 Props 变化并更新图表 ---
watch(() => props.top10data, (newData) => {
  if (newData) {
    initChart();
  }
}, {
  deep: true,
});

</script>

<style scoped>
.charBox-placeholder {
  text-align: center;
  padding: 40px;
  color: #909399;
  height: 380px; /* 与图表高度保持一致 */
  display: flex;
  justify-content: center;
  align-items: center;
}
@import "@/styles/_variables.scss";

.container {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  min-height: 420px;
}

.homeTitle {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 20px 0;
}

.charBox {
  width: 100%;
  height: 380px; /* 与图表高度保持一致 */
}
.charBox-placeholder {
  text-align: center;
  padding: 40px;
  color: #909399;
  height: 380px; /* 与图表高度保持一致 */
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<!-- ### 主要改动说明

1.  **模板 (`<template>`)**:
    *   **`v-if` 防御**: 添加了 `v-if` 来确保在父组件的异步数据返回之前，组件不会因访问 `undefined` 而报错。
    *   **`ref` 替换 `id`**: 将 `<div id="top">` 修改为了 `<div ref="chartRef">`，以便在 `<script setup>` 中以 Vue 的方式安全地获取 DOM 元素。

2.  **脚本 (`<script setup>`)**:
    *   **`defineProps`**: 用于声明 `top10data` 这个 `prop`。
    *   **ECharts 实例管理**:
        *   `const chartRef = ref(null)`: 创建了一个模板引用。
        *   `let myChart = null`: 创建一个变量来持有 ECharts 实例。
    *   **`watch` 监听器**: 使用 `watch` 来监听 `props.top10data` 的变化。当数据变化时，自动调用 `initChart()` 来更新图表，这完美替代了 Vue 2 中的 `@Watch` 和 `$nextTick`。
    *   **生命周期管理**:
        *   `onMounted`: 在组件挂载后，调用 `initChart()` 进行首次渲染，并添加一个窗口 `resize` 事件监听，使图表能够自适应屏幕大小变化。
        *   `onUnmounted`: **这是非常重要的一步**。在组件销毁时，移除 `resize` 监听并调用 `myChart.dispose()` 来销毁 ECharts 实例，**防止内存泄漏**。

3.  **ECharts 配置优化**:
    *   `xAxis.type`: 对于横向条形图，X 轴应该是数值轴 (`value`)，Y 轴是类目轴 (`category`)。我修正了这一点。
    *   `label.position`: 将标签的位置从 `['8', '5']` (一个可能导致问题的自定义位置) 修改为标准的 `'right'`，让数值显示在柱条的右侧，更清晰。
    *   `backgroundStyle.borderRadius`: 为背景条也添加了圆角，使视觉效果更统一。
    *   `grid.right`: 给图表的右侧留出 `20px` 的空间，防止最长的标签（如“馒头”）的数值被遮挡。

这个转换后的版本不仅在语法上适配了 Vue 3，而且通过修正 ECharts 配置和加强生命周期管理，使其比原版功能更正确、代码更健壮。 -->
